<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <em>em</em>
    <div class="box" title="这是title" abc="这是abc">
        <span>1</span>
        文字
        <!-- 注释 -->
        <span>2</span>
    </div>
    <i>i</i>
</body>
<script>
    // 其他节点选择器都是间接选择（关系选择），都需要参照元素
    var box = document.querySelector(".box");

    // 注释节点
    console.log( box.childNodes[3] );
    console.log( box.childNodes[3].nodeType );
    console.log( box.childNodes[3].nodeName );
    console.log( box.childNodes[3].nodeValue );
    // 文本节点
    console.log( box.childNodes[2] );
    console.log( box.childNodes[2].nodeType );
    console.log( box.childNodes[2].nodeName );
    console.log( box.childNodes[2].nodeValue );
    // 元素节点
    console.log( box.childNodes[1] );
    console.log( box.childNodes[1].nodeType );
    console.log( box.childNodes[1].nodeName );
    console.log( box.childNodes[1].nodeValue );
    // 属性节点
    console.log( box.attributes[0] );
    console.log( box.attributes[0].nodeType );
    console.log( box.attributes[0].nodeName );
    console.log( box.attributes[0].nodeValue );
    // 根节点
    console.log(document);
    console.log(document.nodeType);
    console.log(document.nodeName);
    console.log(document.nodeValue);


    // 过滤节点
    // 所有的注释节点
    // for(var i=0;i<box.childNodes.length;i++){
        // if(box.childNodes[i].nodeType === 8){}
        // if(box.childNodes[i].nodeName === "#comment"){}
    // }

    
</script>
</html>